<!-- 项目介绍 -->

<template>
  <div>
    <el-card>
      <el-descriptions title="项目信息">
        <el-descriptions-item label="项目名称"><span style="color: #ff4500">《基于SpringBoot的在线考试系统设计与实现》</span>
        </el-descriptions-item>
        <el-descriptions-item label="作者">杨子宇</el-descriptions-item>
        <el-descriptions-item label="指导老师">刘松</el-descriptions-item>
        <el-descriptions-item label="联系电话">18848588783</el-descriptions-item>
        <el-descriptions-item label="联系地址">贵州省剑河县南加镇城东社区街上一组</el-descriptions-item>
        <el-descriptions-item label="类型">
          <el-tag size="small">毕业设计</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card style="width: 900px;height: 620px;margin-top: 15px;float: left">
      <div>
        <div>
          <p style="text-align: center">简介</p>
        </div>
        <div class="content">
          <p>
            在线考试系统是为了满足当代教育领域的需求，可以解决纸张资源消耗重大的问题，同时为老师提供一个更为方便的资源管理，方便学生考试而开发的一个平台。
          </p>
          <p>
            在线考试系统，是基于SpringBoot框架进行开发，该系统主要由三部分组成，第一部分为首页，可以实习登录注册；第二部分为学生答题页面，能够进行报名和在线答题；第三部分为教师后端，可以对学生的试卷进行批改，并且对一些其他资源进行管理等。
          </p>
          <p>
            此系统在期末拥有着十分重要的实际应用价值，它能节约纸张成本，同时极大地减轻了老师的工作负担，提高了工作效率，该系统的目的是创办一种新的考试模式，为学生提供新的学习和考试环境，让考试变得更加公平、公正。
          </p>
        </div>
      </div>
    </el-card>
    <el-card style="width: 770px;height: 620px;margin-top: 15px;float: right">
      <div style="text-align: center">
        <p>技术栈</p>
      </div>

      <div>
        <div style="width: 50%;display: inline-block;float: left">
          <div style="width: 80%;margin: 0 auto">
            <p style="text-align: center;margin: 0 auto">前端</p>
            <div class="former-box">
              <p>Vue</p>
              <p>Element-ui</p>
              <p>Axios</p>
              <p>Jquery</p>
              <p>Moment</p>
              <p>I18n</p>
              <p>...</p>
            </div>
          </div>
        </div>

        <div style="width: 50%;display: inline-block;float: right">
          <div style="width: 80%;margin: 0 auto">
            <p style="text-align: center;margin: 0 auto">后端</p>
            <div class="after-box">
              <p>SpringBoot</p>
              <p>MySQL</p>
              <p>MyBatis-Plus</p>
              <p>HuTool</p>
              <p>JWT</p>
              <p>...</p>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Tea_ProjectIntroduction",
  data() {
    return {
      imgs: [],
    }
  }
}
</script>

<style scoped>
.content p {
  margin: 0 0;
  text-indent: 30px;
}

.former-box{
  margin-top: 8px;
  padding: 10px;
  box-shadow: 0 8px 8px rgba(10,16,20,.24),0 0 8px rgba(10,16,20,.12);
}
.after-box{
  margin-top: 8px;
  padding: 10px;
  box-shadow: 0 8px 8px rgba(10,16,20,.24),0 0 8px rgba(10,16,20,.12);
}

.former-box p{
  margin-left: 10px;
}
.after-box p{
  margin-left: 10px;
}
</style>